<template>
	<view class="box">
		<view class="content" hover-class="content_h" hover-stay-time="100">
			<slot></slot>
			<text class="title">{{title}}</text>
			<text class="detail">{{detail}}</text>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		title: {
			type: String,
			default: ""
		},
		detail: {
			type: String,
			default: ""
		}
	})
</script>

<style lang="scss" scoped>
	.box {
		.content {
			border-bottom: 6rpx solid #ffc000;
			border-radius: 15rpx;
			
			box-shadow: 6px 8px 20px 0px rgba(0, 0, 0, 0.2);
			background: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 336rpx;
			height: 384rpx;

			.title {
				font-size: 30rpx;
				font-weight: 700;
				padding-top: 30rpx;
			}

			.detail {
				padding: 20rpx 15rpx;
				font-size: 22rpx;
				color: #666666;
				text-align: center;
			}
		}

		.content_h {
			box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
			border: 0;
			background: #eee;
			overflow: hidden;
		}
	}
</style>